<template>
  <div class="main">
    <govheader
      title="化工产业大脑 · 智能制造诊断评估"
      @zfNameflagChange="zfNameflagChange"
    ></govheader>
    <govnavigation></govnavigation>
    <el-row class="content" :gutter="10" style="margin: 0px" v-if="zfNameflag">
      <el-col :span="8" class="content-left" style="width: 33.509%">
        <div class="box" style="height: 154px">
          <div class="title">
            <p>数据统计</p>
          </div>
          <div class="content-body" style="margin-top: 16px">
            <el-row
              class="content-body-box"
              :gutter="10"
              style="width: 100%; margin-left: 0px"
            >
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-value">
                    <div class="active">{{ entQty }}</div>
                  </div>
                  <div class="total-index-title">化工企业数</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-value">
                    <div class="active">{{ gsEntQty }}</div>
                  </div>
                  <div class="total-index-title">规上化工企业数</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-value">
                    <div class="active">{{ ansEntQty }}</div>
                  </div>
                  <div class="total-index-title">已诊断化工企业数</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-value">
                    <div class="active">{{ andGsEntQty }}</div>
                  </div>
                  <div class="total-index-title">已诊断规上化工企业数</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="box" style="height: 293px">
          <div class="title">
            <p>企业诊断情况</p>
          </div>
          <div class="content-body" style="margin-top: 15px">
            <div class="index-body" style="margin-right: 2%; width: 42%">
              <div class="index-content">
                <div id="myChart3" style="width: 100%; height: 200px"></div>
              </div>
            </div>
            <div class="index-body" style="width: 55%">
              <div class="index-title">
                <div class="title-blue"></div>
                <span class="title-content">
                  <p>已诊断企业排名情况</p>
                </span>
              </div>
              <div class="index-content">
                <el-table
                  ref="table1"
                  :data="tableData1"
                  max-height="190px"
                  class="ranking-table"
                  :cell-style="{ padding: '6px 0px', fontSize: '12px' }"
                  :header-cell-style="{
                    backgroundColor: '#CADFFF',
                    color: '#4A6899',
                    padding: '6px 0px',
                    fontSize: '12px',
                  }"
                  :cell-class-name="tableRowClassName1"
                >
                  <el-table-column
                    type="index"
                    label="排名"
                    width="50"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="name"
                    label="企业名称"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    prop="score"
                    label="诊断得分"
                    width="80"
                    align="center"
                  >
                    <!-- <template scope="scope">
                    <span
                      style="
                        font-weight: 600;
                        background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      "
                      >{{ scope.row.score }}</span
                    >
                  </template> -->
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
        <div class="box" style="height: 297px; margin-bottom: 0px">
          <div class="title">
            <p>已诊断企业排名情况</p>
          </div>
          <div class="content-body">
            <div id="myChart4" style="width: 100%; height: 252px"></div>
          </div>
        </div>
      </el-col>
      <el-col
        :span="7"
        style="background-color: (255, 255, 255, 0.5); width: 66.491%"
      >
        <el-row :gutter="10" style="margin-left: 0px">
          <el-col :span="12" style="position: relative">
            <div id="myChart1" style="width: 100%; height: 450px"></div>
            <div class="legend-body">
              <div class="legend-content">
                <div>
                  <div
                    class="legend-point"
                    style="background: rgba(0, 141, 221, 1)"
                  ></div>
                  <div class="legend-title" style="color: rgba(0, 228, 255, 1)">
                    已诊断企业数
                  </div>
                </div>

                <div class="legend-value active">{{ num }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="10" style="margin: 0px">
              <el-col :span="12">
                <div class="box" style="height: 225px; margin-bottom: 0px">
                  <div class="title">
                    <p>企业诊断平均得分占比</p>
                  </div>
                  <div class="content-body">
                    <div class="head-body">
                      <div v-show="averageProportion.length > 0">
                        <div
                          class="head-body-box"
                          v-for="(item, index) in averageProportion"
                          :key="index"
                        >
                          <div
                            class="head-body-left"
                            :style="{ 'margin-top': item.leftHeight }"
                          >
                            <el-row
                              class="isMove"
                              :gutter="5"
                              style="margin-left: 0px; margin-right: 0px"
                            >
                              <el-col
                                style="
                                  white-space: nowrap;
                                  overflow: hidden;
                                  text-overflow: ellipsis;
                                  color: rgba(215, 215, 215, 1);
                                "
                                :title="item.fraction"
                                :span="14"
                                >{{ item.fraction }}</el-col
                              >
                              <!-- <el-col :span="8">{{ item.proportion }}%</el-col> -->
                              <el-col
                                style="
                                  white-space: nowrap;
                                  overflow: hidden;
                                  text-overflow: ellipsis;
                                  color: rgba(0, 228, 255, 1);
                                "
                                :title="item.number + '家'"
                                :span="10"
                                >{{ item.number }}家</el-col
                              >
                            </el-row>
                            <el-row
                              class="isMove"
                              style="
                                width: 35%;
                                padding: 2px 0px;
                                background: transparent;
                                margin-left: 0px;
                                margin-right: 0px;
                              "
                            >
                              <div
                                :style="{ color: colorList3[item.fraction] }"
                                :title="item.proportion + '%'"
                                style="
                                  width: 66%;
                                  font-size: 12px;
                                  margin-left: 20%;
                                  float: left;
                                  white-space: nowrap;
                                  overflow: hidden;
                                  text-overflow: ellipsis;
                                "
                              >
                                {{ item.proportion }}%
                              </div>
                            </el-row>
                          </div>
                          <el-tooltip
                            class="item"
                            effect="dark"
                            :content="item.fraction"
                            placement="top"
                          >
                            <div
                              class="head-body-right"
                              :style="{
                                height: item.height,
                                background: colorList3[item.fraction],
                              }"
                              style="width: 10%; cursor: pointer"
                            ></div>
                          </el-tooltip>
                        </div>
                      </div>
                      <div
                        v-show="averageProportion.length === 0"
                        style="
                          width: 100%;
                          text-align: center;
                          color: #909399;
                          margin-top: 70px;
                        "
                      >
                        暂无数据
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="box" style="height: 225px; margin-bottom: 0px">
                  <div class="title">
                    <p>各能力域诊断评分情况</p>
                  </div>
                  <div class="content-body">
                    <div class="head-body" style="padding: 0px">
                      <div
                        id="myChart2"
                        style="width: 100%; height: 170px"
                      ></div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="margin: 10px 0px 0px 0px">
              <el-col :span="24">
                <div class="box" style="height: 224px; margin-bottom: 0px">
                  <div class="title">
                    <p>智能制造水平分布情况</p>
                  </div>
                  <div class="content-body" style="padding: 0px">
                    <div
                      style="overflow: auto; height: 180px; width: 100%"
                      ref="table3"
                      class="table3"
                    >
                      <div v-show="tableData3.length > 0">
                        <el-collapse>
                          <el-collapse-item
                            v-for="field in tableData3"
                            :key="field.field"
                          >
                            <template slot="title">
                              <div
                                style="
                                  width: 97%;
                                  padding: 0px 5px 0px 0px;
                                  font-size: 12px;
                                  color: rgba(215, 215, 215, 1);
                                "
                                class="collapse-title"
                              >
                                <div
                                  :title="field.field"
                                  style="
                                    float: left;
                                    width: 14.2%;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                  "
                                >
                                  {{ field.field }}
                                </div>
                                <div
                                  style="
                                    float: right;
                                    padding: 9px 0px 0px 0px;
                                    height: 40px;
                                    width: 84%;
                                  "
                                >
                                  <div
                                    v-for="title in field.fieldTitleList"
                                    :key="title.titleName"
                                    style="
                                      float: right;
                                      height: 30px;
                                      text-align: center;
                                      line-height: 30px;
                                      white-space: nowrap;
                                      overflow: hidden;
                                      color: #ffffff;
                                    "
                                    :style="{
                                      width: title.rate,

                                      backgroundColor:
                                        colorList1[title.titleName],
                                    }"
                                  >
                                    <el-tooltip
                                      class="item"
                                      effect="dark"
                                      :content="
                                        title.titleName +
                                        '[' +
                                        title.count +
                                        ']'
                                      "
                                      placement="top"
                                    >
                                      <span
                                        v-if="
                                          Number(title.rate.replace('%', '')) >
                                          16
                                        "
                                      >
                                        {{ title.titleName }}[{{ title.count }}]
                                      </span>
                                      <span v-else
                                        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
                                      >
                                    </el-tooltip>
                                  </div>
                                </div>
                              </div>
                            </template>
                            <div
                              style="
                                margin-top: 10px;
                                padding: 0px 5px 0px 0px;
                                font-size: 12px;
                                color: #4b5463;
                              "
                            >
                              <div
                                style="
                                  width: 100%;
                                  padding-bottom: 5px;
                                  margin-top: 5px;
                                "
                                v-for="question in field.questionList"
                                :key="question.description"
                              >
                                <el-tooltip
                                  class="item"
                                  effect="dark"
                                  :content="question.description"
                                  placement="top"
                                >
                                  <span
                                    style="
                                      display: inline-block;
                                      margin-left: 5%;
                                      width: 27%;
                                      white-space: nowrap;
                                      overflow: hidden;
                                      text-overflow: ellipsis;
                                      line-height: 24px;
                                      color: #ffffff;
                                    "
                                    >{{ question.description }}</span
                                  >
                                </el-tooltip>
                                <div
                                  style="float: right; height: 24px; width: 65%"
                                >
                                  <div
                                    v-for="answer in question.answerList"
                                    :key="answer.titleName"
                                    style="
                                      float: right;
                                      height: 24px;
                                      text-align: center;
                                      white-space: nowrap;
                                      overflow: hidden;
                                      color: #4b5463;
                                    "
                                    :style="{
                                      width: answer.rate,
                                      backgroundColor:
                                        colorList2[answer.titleName],
                                      color:
                                        answer.titleName === 'FI'
                                          ? '#FFFFFF'
                                          : '#4B5463',
                                    }"
                                  >
                                    <el-tooltip
                                      class="item"
                                      effect="dark"
                                      :content="
                                        answer.titleName +
                                        '[' +
                                        answer.count +
                                        ']'
                                      "
                                      placement="top"
                                    >
                                      <span
                                        v-if="
                                          Number(answer.rate.replace('%', '')) >
                                          12
                                        "
                                      >
                                        {{ answer.titleName }}[{{
                                          answer.count
                                        }}]
                                      </span>
                                      <span v-else
                                        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
                                      >
                                    </el-tooltip>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </el-collapse-item>
                        </el-collapse>
                      </div>
                      <div
                        v-show="tableData3.length === 0"
                        style="width: 100%; text-align: center; color: #909399"
                      >
                        暂无数据
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row style="margin: 0px 5px 0px 0px">
          <div
            class="box"
            style="margin-top: 10px; height: 295px; margin-bottom: 0px"
          >
            <div class="title">
              <p>填报企业样本情况</p>
            </div>
            <div
              class="content-body"
              style="overflow: hidden; margin-top: 10px; padding: 0px 15px"
            >
              <div style="width: 100%">
                <el-table
                  :data="tableData2"
                  max-height="245px"
                  class="first-table"
                  :cell-class-name="tableRowClassName2"
                  :cell-style="{
                    padding: '5px 0px',
                    fontSize: '12px',
                    color: '#4B5463',
                  }"
                  :header-cell-style="{
                    backgroundColor: '#CADFFF',
                    color: '#4A6899',
                    padding: '5px 0px',
                    fontSize: '12px',
                  }"
                  style="width: 100%; margin-bottom: 20px"
                  :span-method="arraySpanMethod"
                  row-key="enterpriseName"
                  ref="firstTable"
                  @row-click="clickFirstRowHandle"
                >
                <el-table-column
                    type="index"
                    label="序号"
                    width="60"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="enterpriseName"
                    label="企业名称"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    prop="region"
                    label="所在区域"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    prop="industry"
                    label="所属行业"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    prop="evaluationTime"
                    label="评估时间"
                    width="150"
                  ></el-table-column>
                  <el-table-column
                    prop="score"
                    label="准备度得分"
                    width="90"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="level"
                    label="准备度等级"
                    width="90"
                    align="center"
                  ></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog
      :visible.sync="moreShow"
      class="content-body"
      width="60%"

      :title="showTableData.enterpriseName"
      custom-class="black"
    >

      <div id="tableColor1">
        <el-table
          ref="listTable"
          :data="showTableData.datas"

          height="440"
          :cell-class-name="tableRowClassName1"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                class="table-in-table"
                :data="props.row.datas"

                :cell-class-name="tableRowClassName1"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="60"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="describe"
                  label="特征项描述"
                ></el-table-column>
                <el-table-column
                  prop="result"
                  label="提交结果"
                  width="80"
                  align="center"
                ></el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column prop="fieldName" label="准备度域"></el-table-column>
          <el-table-column
            prop="score"
            label="域得分"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="level"
            label="域等级"
            width="80"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dd from 'gdt-jsapi'
import govheader from '@/components/govheader2'
import govnavigation from '@/components/govnavigation2'
const echarts = require('echarts')
export default {
  components: { govheader, govnavigation },
  name: 'zfPerMuBenefit',
  data () {
    return {
      entQty: 0,
      gsEntQty: 0,
      ansEntQty: 0,
      andGsEntQty: 0,
      tableData1: [],
      tableData2: [],
      tableData3: [],
      num: 0,
      colorList1: {
        引领级: 'rgba(145, 81, 205, 0.25)',
        优化级: 'rgba(145, 81, 205, 1)',
        集成级: 'rgba(50, 213, 165, 1)',
        规范级: 'rgba(117, 188, 127, 1)',
        规划级: 'rgba(29, 90, 204, 1)',
        启动级: 'rgba(2, 43, 126, 1)'
      },
      colorList2: {
        FI: '#719CC1',
        LI: '#8CBAE2',
        PI: '#BFDAF2',
        NI: '#DFEAF5',
        NA: 'rgb(191, 191, 191)'
      },
      colorList3: {
        '0-20分': 'rgb(95, 226, 187)',
        '20-40分': '#5F83FF',
        '40-60分': '#F3A52A',
        '60-80分': '#00DBD4',
        '80-100分': '#00A3FF'
      },
      showTableData: [],
      regionSelect: '',
      regionOptions: [{ cityCode: '', cityName: '全省' }],
      industrySelect: '',
      industryOptions: [{ industryCode: '', industryName: '全部化工行业' }],
      yearSelect: '',
      pickerOptions: {
        disabledDate: (time) => {
          return (
            time.getTime() >
            new Date(new Date().getFullYear(), new Date().getMonth(), 0)
          )
        }
      },
      option1: '',
      option2: '',
      option3: '',
      option4: '',
      myChart1: '',
      myChart2: '',
      myChart3: '',
      myChart4: '',
      option1Data: [],
      option1MinData: 0,
      option1MaxData: 1000000,
      option2XData: [],
      option2Data: [],
      option3Data: 0,
      option3Title: '暂无数据',
      option4XData: [],
      option4Bar1Data: [],
      option4Bar2Data: [],
      option4Bar3Data: [],
      option4Bar4Data: [],
      option4Bar5Data: [],
      averageProportion: [],
      table1Interval: null,
      firstTableInterval: null,
      table3Interval: null,
      zfNameflag: true,
      moreShow: false,
      active: 1,
      active1: 0,
      startCharts1: null,
      startCharts4: null,
      echarts1Interval: null
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({})
        .then((res) => {
          if (res) {
            let params = {
              applicationFlag: '20',
              authCode: res.auth_code
            }
            this.$http
              .post(`/home/sys/loginfree/authentication`, params)
              .then(({ data: res }) => {
                console.log('res2:', res)
                localStorage.setItem('buriedPointInformation',JSON.stringify(res.data))
                this.$store.commit('zfName', res.data.lastName)
                if (res.code !== 0) {
                  this.zfNameflag = false
                }
              })
              .catch(() => {
                this.zfNameflag = false
              })
          }
        })
        .catch(() => {
          this.zfNameflag = false
        })
    }
  },
  // 调用
  mounted () {
    if (this.zfNameflag) {
      this.yearSelect = new Date().getFullYear() - 1 + ''
      this.getSelectList()
      this.getData()
    }
  },
  beforeDestroy () {
    clearInterval(this.table1Interval)
    clearInterval(this.firstTableInterval)
    clearInterval(this.table3Interval)
    clearInterval(this.listTableInterval)
    clearInterval(this.startCharts4)
    clearInterval(this.startCharts1)
    clearInterval(this.echarts1Interval)
  },
  methods: {
    zfNameflagChange (val) {
      this.zfNameflag = val
    },
    getright_table (tableRef) {
      var isScroll = true
      // 拿到表格挂载后的真实DOM
      const table = this.$refs[tableRef]
      // 拿到表格中承载数据的div元素
      var divData = null
      if (table.bodyWrapper) {
        divData = table.bodyWrapper
      } else {
        divData = table
      }
      this.addEvent(divData, 'mouseenter', function () {
        isScroll = false
      })
      this.addEvent(divData, 'mouseleave', function () {
        isScroll = true
      })
      this[tableRef + 'Interval'] = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    addEvent (obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on' + sEvent, fn)
      } else {
        obj.addEventListener(sEvent, fn, false)
      }
    },
    getSelectList () {
      this.$http
        .get(
          `/home/government/consultQuestionnaireQuestion/getConsultIndustryList`
        )
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.industryOptions = [...this.industryOptions, ...res.data]
          } else {
            this.$message.warning(res.msg)
          }
        })
      this.$http
        .get(`/home/government/consultQuestionnaireQuestion/getConsultCityList`)
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.regionOptions = [...this.regionOptions, ...res.data]
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    clickFirstRowHandle (row) {
      // console.log(row)
      this.showTableData = row
      this.moreShow = true
      this.$nextTick(() => {
        this.getright_table('listTable')
      })

      // this.$refs.firstTable.toggleRowExpansion(row)
    },
    clickSecondRowHandle (row, column, event) {
      this.$refs['secondTable' + row.cid].toggleRowExpansion(row)
    },
    getData () {
      this.$http
        .post(`/home/government/consultQuestionnaireQuestion/getConsultInitZF`, {
          industryCode: this.industrySelect,
          cityCode: this.regionSelect,
          years: this.yearSelect
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.entQty = res.data.entQty
            this.gsEntQty = res.data.gsEntQty
            this.ansEntQty = res.data.ansEntQty
            this.andGsEntQty = res.data.andGsEntQty

            this.option1Data = res.data.ansEntQtyView.cityName.map(
              (item, index) => {
                this.num += res.data.ansEntQtyView.entQty[index]
                return {
                  name: item,
                  value: res.data.ansEntQtyView.entQty[index]
                }
              }
            )

            this.option1MinData = this.option1Data.reduce((num1, num2) => {
              return num1.value >= num2.value ? num2 : num1
            }).value

            this.option1MaxData = this.option1Data.reduce((num1, num2) => {
              return num1.value >= num2.value ? num1 : num2
            }).value

            if (
              res.data.domainAveScoreChart &&
              res.data.domainAveScoreChart.length > 0
            ) {
              this.option2XData = res.data.domainAveScoreChart.map((item) => {
                return {
                  name: item.name,
                  max: item.maxScore
                }
              })
              this.option2Data = res.data.domainAveScoreChart.map((item) => {
                return item.aveScore
              })
            } else {
              this.option2XData = [
                { name: '控制系统域', max: 12.0 },
                { name: '设备设施域', max: 12.0 },
                { name: '网络支撑域', max: 9.0 },
                { name: '计划调度域', max: 12.0 },
                { name: '质量管理域', max: 13.0 },
                { name: '设备管理域', max: 12.0 },
                { name: '能源管理域', max: 17.0 },
                { name: '安全环保域', max: 13.0 }
              ]
              this.option2Data = [0, 0, 0, 0, 0, 0, 0, 0]
            }
            if (this.entQty !== 0) {
              this.option3Data = ((this.ansEntQty / this.entQty) * 100).toFixed(
                2
              )
              this.option3Title = this.ansEntQty + '/' + this.entQty
            } else {
              this.option3Data = 0
              this.option3Title = '暂无数据'
            }

            this.option4XData = res.data.domainReadinessIndex.domainName
            this.option4Bar1Data = res.data.domainReadinessIndex.minValue
            this.option4Bar2Data = res.data.domainReadinessIndex.quarterValue
            this.option4Bar3Data = res.data.domainReadinessIndex.halfValue
            this.option4Bar4Data =
              res.data.domainReadinessIndex.threeFourthsValue
            this.option4Bar5Data = res.data.domainReadinessIndex.maxValue

            this.averageProportion = res.data.entAveScore
            if (res.data.entAveScore && res.data.entAveScore.length > 0) {
              let count = res.data.entAveScore.length
              this.averageProportion.forEach((item) => {
                item.proportion = item.proportion * 100
                let proportion = (
                  14 +
                  (item.proportion * (100 - 14 * count)) / 100
                ).toFixed(0)
                item.height = 150 * (proportion / 100) + 'px'
                item.leftHeight = 150 * (proportion / 100) - 22 + 'px'
              })
            }

            this.tableData1 = res.data.topTenEnt
            this.tableData2 = res.data.entSampleSituation
            this.tableData3 = res.data.distribution
            this.tableData3.forEach((fieldData) => {
              let initFieldTitle = [
                { titleName: '引领级', rate: '4%', count: 0 },
                { titleName: '优化级', rate: '4%', count: 0 },
                { titleName: '集成级', rate: '4%', count: 0 },
                { titleName: '规范级', rate: '4%', count: 0 },
                { titleName: '规划级', rate: '4%', count: 0 },
                { titleName: '启动级', rate: '4%', count: 0 }
              ]
              fieldData.fieldTitleList.forEach((fieldTitleData) => {
                initFieldTitle.forEach((item) => {
                  if (item.titleName === fieldTitleData.titleName) {
                    item.count = fieldTitleData.count
                    let rate =
                      Number(fieldTitleData.rate.replace('%', '')) * 0.76
                    item.rate = Math.floor((rate + 4) * 100) / 100 + '%'
                  }
                })
              })
              fieldData.fieldTitleList = initFieldTitle

              fieldData.questionList.forEach((question) => {
                let initAnswerTitle = [
                  { titleName: 'FI', rate: '6%', count: 0 },
                  { titleName: 'LI', rate: '6%', count: 0 },
                  { titleName: 'PI', rate: '6%', count: 0 },
                  { titleName: 'NI', rate: '6%', count: 0 },
                  { titleName: 'NA', rate: '6%', count: 0 }
                ]
                question.answerList.forEach((answer) => {
                  initAnswerTitle.forEach((item) => {
                    if (item.titleName === answer.titleName) {
                      item.count = answer.count
                      let rate = Number(answer.rate.replace('%', '')) * 0.7
                      item.rate = Math.floor((rate + 6) * 100) / 100 + '%'
                    }
                  })
                })
                question.answerList = initAnswerTitle
              })
            })
            this.renderMyChart1()
            this.renderMyChart2()
            this.renderMyChart3()
            this.renderMyChart4()

            this.getright_table('table1')
            this.getright_table('firstTable')

            this.getright_table('table3')
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    yearChange (value) {
      this.yearSelect = value
      this.getData()
    },
    regionChange (value) {
      this.regionSelect = value
      this.getData()
    },
    industryChange (value) {
      this.industrySelect = value
      this.getData()
    },
    tableRowClassName1 ({ row, column, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'table-row1'
      } else {
        return 'table-row2'
      }
    },
    tableRowClassName2 ({ row, column, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'table-row1'
      } else {
        return 'table-row2'
      }
    },
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (!row.datas) {
        if (columnIndex === 0) {
          return [0, 0]
        } else if (columnIndex === 1) {
          return [1, 2]
        }
      }
    },
    renderMyChart1 () {
      this.myChart1 = echarts.init(document.getElementById('myChart1'))
      let uploadedDataURL = require('../zhejiang.json')
      echarts.registerMap('zhejiang', uploadedDataURL)

      this.option1 = {
        title: {
          text: '各地市企业诊断情况',
          top: '10px',
          textStyle: {
            fontSize: 14,
            width: '100%',
            color: '#1c4ca1'
          }
        },
        tooltip: {
          trigger: 'item',
          extraCssText: 'z-index: 10',
          backgroundColor: 'transparent',
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color: '#00E4FF'
          },
          formatter: function (para) {
            if (para.seriesType === 'map') {
              let str = `<div style="position: relative;border:1px solid #00d3e7;background-color:rgba(10, 39, 116, .5);padding:5px">
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;bottom: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;bottom: -3px;"></div>`
              str += `<div style="color:#fcaf17;text-align: center;font-weight: 600">
               ${para.data.name} 
                </div>
                <div style="color:#E4E4E4;font-size:12px;"><span style="display:inline-block;width:80px;">已诊断：</span><span style="display:inline-block;color:#00E4FF">
              ${para.data.value}
                </span></div>`

              return str
            } else {
              return ''
            }
          }
        },
        visualMap: {
          type: 'continuous',
          orient: 'vertical',
          showLabel: true,
          seriesIndex: [0],
          min: this.option1MinData,
          max: this.option1MaxData,
          inRange: {
            color: ['#64E4FF', '#206ED4']
          },
          textStyle: {
            color: '#333333'
          },
          bottom: 10,
          right: 10
        },
        series: [
          {
            type: 'map',
            mapType: 'zhejiang', // 自定义扩展图表类型
            label: {
              show: true,
              color: '#fff'
            },
            map: 'zhejiang',
            // center: [104.114129, 37.550339],//当前视角的中心点
            zoom: 1, // 当前视角的缩放比例
            roam: true, // 是否开启平游或缩放
            scaleLimit: {
              // 滚轮缩放的极限控制
              min: 1,
              max: 2
            },
            emphasis: {
              itemStyle: {
                areaColor: '#005DDC'
              },
              label: {
                color: '#ffffff'
              }
            },
            select: {
              itemStyle: {
                areaColor: '#005DDC'
              },
              label: {
                color: '#ffffff'
              }
            },
            data: this.option1Data
          }
        ]
      }
      this.myChart1.setOption(this.option1)
      this.autoPlay(this.myChart1, this.option1, 'startCharts1')
    },
    // 饼状图自动播放
    autoPlay (myChart, option, timer) {
      let flag = true
      let charPiecurrentIndex = 0
      let that = this
      // 鼠标移动上去的时候的高亮动画
      myChart.on('mouseover', function (param) {
        flag = false
        clearInterval(that[timer])
        // 取消之前高亮图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })

        charPiecurrentIndex = param.dataIndex
        //* *解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })

        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
      })

      // 图标随窗口大小缩放
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      that[timer] = setInterval(chartHover, 2000)
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function (param) {
        if (!flag) {
          that[timer] = setInterval(chartHover, 2000)
          flag = true
        }
      })
    },
    renderMyChart2 () {
      this.myChart2 = echarts.init(document.getElementById('myChart2'))
      // this.option2 = {
      //   tooltip: {
      //     formatter: function (item) {
      //       console.log(item)
      //       return 'a'
      //     },
      //     trigger: 'item',
      //     confine: true,
      //     show: true
      //   },
      //   radar: {
      //     indicator: this.option2XData,
      //     radius: '55%',
      //     nameGap: 9,
      //     name: {
      //       fontSize: 10,
      //       color: '#484C52',
      //       lineHeight: 14,
      //       formatter: function (text) {
      //         if (text === '网络支撑域' || text === '能源管理域') {
      //           return text.slice(0, 3) + '\n' + text.slice(3)
      //         } else {
      //           return text
      //         }
      //       }
      //     }
      //   },
      //   series: [
      //     {
      //       name: '各能力域诊断评分情况',
      //       type: 'radar',
      //       data: [
      //         {
      //           value: this.option2Data
      //         }
      //       ]
      //     }
      //   ]
      // }
      const source = {
        data: this.option2Data,
        indicator: this.option2XData
      }
      const buildSeries = function (data) {
        const helper = data.map((item, index) => {
          const arr = new Array(data.length)
          arr.splice(index, 1, item)
          return arr
        })

        return [data, ...helper].map((item, index) => {
          return {
            type: 'radar',
            lineStyle: {
              color: index === 0 ? 'rgb(84, 112, 198)' : 'transparent'
            },
            areaStyle: {
              color: 'rgba(255, 252, 0, 1)'
            },
            tooltip: {
              show: index !== 0,
              confine: true,
              formatter: function () {
                return (
                  source.indicator[index - 1].name +
                  '：' +
                  source.data[index - 1]
                )
              }
            },

            z: index === 0 ? 1 : 2,

            data: [item]
          }
        })
      }

      this.option2 = {
        color: ['RGBA(255, 255, 255, 1)'],
        // gradientColor: ['FFFFFF'],
        tooltip: {},
        radar: {
          // shape: 'circle',
          radius: '52%',
          nameGap: 7,
          name: {
            textStyle: {
              fontSize: 8,
              color: '#ffffff',
              lineHeight: 14,
              formatter: function (text) {
                if (text === '网络支撑域' || text === '能源管理域') {
                  return text.slice(0, 3) + '\n' + text.slice(3)
                } else {
                  return text
                }
              }
            }
          },

          indicator: source.indicator
        },
        series: buildSeries(source.data)
      }
      this.myChart2.setOption(this.option2)
    },
    renderMyChart3 () {
      // this.myChart3 = echarts.init(document.getElementById("myChart3"));
      // console.log(this.option3Data, this.option3Title);
      // this.option3 = {
      //   grid: {
      //     containLabel: true,
      //   },
      //   series: [
      //     {
      //       type: "gauge",
      //       startAngle: 90,
      //       endAngle: -270,
      //       radius: "85%",
      //       pointer: {
      //         show: false,
      //       },
      //       progress: {
      //         show: true,
      //         overlap: false,
      //         // roundCap: true,
      //         clip: false,
      //         width: 10,
      //         itemStyle: {
      //           color: "rgb(68, 114, 196)",
      //         },
      //       },
      //       axisLine: {
      //         lineStyle: {
      //           width: 20,
      //           color: [[1, "rgba(23, 25, 29, 0.05)"]],
      //         },
      //       },
      //       splitLine: {
      //         show: false,
      //         distance: 0,
      //         length: 10,
      //       },
      //       axisTick: {
      //         show: false,
      //       },
      //       axisLabel: {
      //         show: false,
      //         distance: 50,
      //       },
      //       data: [
      //         {
      //           value: this.option3Data,
      //           name: this.option3Title,
      //           title: {
      //             offsetCenter: ["0%", "30%"],
      //           },
      //           detail: {
      //             offsetCenter: ["0%", "-10%"],
      //           },
      //         },
      //       ],
      //       title: {
      //         fontSize: 16,
      //         color: "rgb(68, 114, 196)",
      //       },
      //       detail: {
      //         width: 50,
      //         height: 14,
      //         fontSize: 32,
      //         color: "rgb(68, 114, 196)",
      //         formatter: "{value}%",
      //       },
      //     },
      //   ],
      // };
      // this.myChart3.setOption(this.option3);
      let _this = this
      this.myChart3 = echarts.init(document.getElementById('myChart3'))
      let angle = 0
      let value = _this.option3Data

      function getCirlPoint (x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
        return {
          x: x1,
          y: y1
        }
      }

      this.option3 = {
        title: {
          text: '{a|' + value + '}{c|%}\n{d|企业诊断率}',
          x: 'center',
          y: 'center',
          textStyle: {
            rich: {
              a: {
                fontSize: 20,
                color: '#4FC0FF'
              },
              c: {
                fontSize: 16,
                color: '#4FC0FF'
                // padding: [5,0]
              },
              d: {
                fontSize: 10,
                color: '#ffffff',
                lineHeight: 16
              }
            }
          }
        },
        series: [
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((0 + angle) * Math.PI) / 180,
                  endAngle: ((90 + angle) * Math.PI) / 180
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((180 + angle) * Math.PI) / 180,
                  endAngle: ((270 + angle) * Math.PI) / 180
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((270 + -angle) * Math.PI) / 180,
                  endAngle: ((40 + -angle) * Math.PI) / 180
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((90 + -angle) * Math.PI) / 180,
                  endAngle: ((220 + -angle) * Math.PI) / 180
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2
              let y0 = api.getHeight() / 2
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85
              let point = getCirlPoint(x0, y0, r, 90 + -angle)
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: '#0CD3DB', // 粉
                  fill: '#0CD3DB'
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5', // 绿点
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2
              let y0 = api.getHeight() / 2
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85
              let point = getCirlPoint(x0, y0, r, 270 + -angle)
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: '#0CD3DB', // 绿
                  fill: '#0CD3DB'
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            type: 'pie',
            radius: ['68%', '55%'],
            silent: true,
            clockwise: true,
            startAngle: 90,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: value,
                name: '',
                itemStyle: {
                  normal: {
                    color: '#4FC0FF'
                  }
                }
              },
              {
                value: 100 - value,
                name: '',
                label: {
                  normal: {
                    show: false
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#5F83FF'
                  }
                }
              }
            ]
          },
          {
            name: '',
            type: 'gauge',
            radius: '58%',
            center: ['50%', '50%'],
            startAngle: 0,
            endAngle: 359.9,
            splitNumber: 8,
            hoverAnimation: true,
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              length: 60,
              lineStyle: {
                width: 5,
                color: '#061740'
              }
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            detail: {
              show: false
            },
            data: [
              {
                value: 0,
                name: ''
              }
            ]
          }
        ]
      }
      this.myChart3.setOption(this.option3)

      function draw () {
        angle = angle + 3
        _this.myChart3.setOption(_this.option3, true)
        // window.requestAnimationFrame(draw);
      }
      setTimeout(() => {
        _this.echarts1Interval = setInterval(function () {
          draw()
        }, 50)
      }, 1000)
    },
    renderMyChart4 () {
      var _this = this
      this.myChart4 = echarts.init(document.getElementById('myChart4'))
      this.option4 = {
        // color: [
        //   'RGBA(174, 89, 193, 1)',
        //   'RGBA(153, 202, 100, 1)',
        //   'RGBA(35, 188, 187, 1)',
        //   'RGBA(2, 191, 249, 1)',
        // ],
        tooltip: {
          trigger: 'axis',
          extraCssText: 'z-index: 9',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            let level1 = params[0].value + params[1].value
            let level2 = level1 + params[2].value
            let level3 = level2 + params[3].value
            let level4 = level3 + params[4].value
            return (
              params[4].seriesName +
              '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;' +
              level3.toFixed(2) +
              '-' +
              level4.toFixed(2) +
              '分' +
              '<br>' +
              params[3].seriesName +
              '&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;' +
              level2.toFixed(2) +
              '-' +
              level3.toFixed(2) +
              '分' +
              '<br>' +
              params[2].seriesName +
              '&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;' +
              level1.toFixed(2) +
              '-' +
              level2.toFixed(2) +
              '分' +
              '<br>' +
              params[1].seriesName +
              '&nbsp;:&nbsp;&nbsp;' +
              params[0].value.toFixed(2) +
              '-' +
              level1.toFixed(2) +
              '分' +
              '<br>'
            )
          }
        },
        legend: {
          left: 'right',
          data: ['0%-25%', '25%-50%', '50%-75%', '75%-100%'],

          // 这是legend轴文字颜色
          textStyle: {
            color: '#BFF7FF'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '17%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          splitLine: { show: false },
          axisLabel: {
            interval: 0,
            rotate: 40,
            color: '#BFF7FF'
          },
          data: this.option4XData,
          axisLine: { show: false }, // 轴线/
          axisTick: {
            lineStyle: {
              color: 'RGBA(25, 59, 145, 1)'
            }
          } // 刻度
        },
        yAxis: {
          type: 'value',
          min: 0,
          axisLine: {
            // 这是y轴文字颜色
            lineStyle: {
              color: '#BFF7FF'
            }
          },
          axisLabel: {
            color: '#BFF7FF'
          },
          splitLine: {
            show: true,
            lineStyle: { color: 'RGBA(25, 59, 145, 1)' }
          } // 分隔线
        },
        series: [
          {
            name: '',
            barWidth: 22,
            type: 'bar',
            stack: '总量',
            show: false,
            itemStyle: {
              barBorderColor: 'rgba(0,0,0,0)',
              color: 'rgba(0,0,0,0)'
            },
            emphasis: {
              itemStyle: {
                barBorderColor: 'rgba(0,0,0,0)',
                color: 'rgba(0,0,0,0)'
              }
            },
            data: this.option4Bar1Data
          },
          {
            name: '75%-100%',
            type: 'bar',
            show: 'false',
            stack: '总量',
            label: {
              show: false,
              position: 'top'
            },
            data: this.option4Bar2Data,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      // 0% 处的颜色
                      offset: 0,
                      color: 'rgba(173, 88, 194, 1)'
                    },
                    {
                      // 100% 处的颜色
                      offset: 1,
                      color: 'rgba(179, 91, 189, 1)'
                    }
                  ],
                  false
                )
              }
            }
          },
          {
            name: '50%-75%',
            type: 'bar',
            stack: '总量',
            label: {
              show: false,
              position: 'bottom'
            },
            data: this.option4Bar3Data,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      // 0% 处的颜色
                      offset: 0,
                      color: 'rgba(158, 194, 88, 1)'
                    },
                    {
                      // 100% 处的颜色
                      offset: 1,
                      color: 'rgba(149, 189, 91, 1)'
                    }
                  ],
                  false
                )
              }
            }
          },
          {
            name: '25%-50%',
            type: 'bar',
            stack: '总量',
            label: {
              show: false,
              position: 'top'
            },
            data: this.option4Bar4Data,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      // 0% 处的颜色
                      offset: 0,
                      color: 'rgba(1, 253, 245, 1)'
                    },
                    {
                      // 100% 处的颜色
                      offset: 1,
                      color: 'rgba(0, 178, 172, 1)'
                    }
                  ],
                  false
                )
              }
            }
          },
          {
            name: '0%-25%',
            type: 'bar',
            stack: '总量',
            label: {
              show: false,
              position: 'top'
            },
            data: this.option4Bar5Data,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      // 0% 处的颜色
                      offset: 0,
                      color: 'rgba(0, 138, 216, 1)'
                    },
                    {
                      // 100% 处的颜色
                      offset: 1,
                      color: 'rgba(0, 163, 255, 1)'
                    }
                  ],
                  false
                )
              }
            }
          }
        ]
      }
      this.myChart4.setOption(this.option4)
      this.autoPlay(_this.myChart4, _this.option4, 'startCharts4')
    }

  }
}
</script>
<style lang="scss" scoped>
.main {
  background: #041565;
  background-size: 100% 100%;
}
.box {
  background-image: url("../../../../assets/img/industry/框尺寸1.png");
  padding: 10px;
  margin-bottom: 10px;
  background-size: 100% 100%;
  overflow: hidden;
}
.title {
  width: 260px;
  background-image: url("../../../../assets/img/industry/小标题背景1.png");
  background-size: 100% 100%;
  font-size: 14px;
  margin-left: 22px;
  font-weight: 700;
  color: #ffffff;
  p {
    padding-left: 26px;
    font-size: 12px;
  }
}
.content {
  width: 100%;
  padding: 10px;
  padding-bottom: 15px;
}
.content-body {
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
}
.index-body {
  height: 244px;
}
.index-title {
  width: 100%;
  height: 16px;
}
.index-content {
  width: 100%;
  margin-top: 20px;
}
.title-blue {
  width: 4px;
  height: 15px;
  background-color: #00a3ff;
  float: left;
}
.title-content {
  float: left;
  margin-left: 5px;
  color: #ffffff;
  font-size: 13px;
  line-height: 15px;
}
.total-index-body {
  height: 86px;
  padding: 5px 5px 0px 5px;
  text-align: center;
  .total-index-title {
    width: 100%;

    font-size: 12px;
    color: rgba(0, 228, 255, 1);
    text-align: center;
    margin-top: 9px;
  }
  .total-index-value {
    font-size: 14px;
    color: #00a3ff;
    width: 50px;
    height: 60px;
    font-weight: 600;
    line-height: 100px;
    text-align: center;
    margin: 0 auto;
  }
}
/deep/ .el-collapse-item__header {
  border: none;
}
/deep/.el-collapse-item__arrow {
  color: rgba(0, 228, 255, 1);
}
/deep/ .el-table__expanded-cell {
  border-bottom: 0px !important;
  border-right: 0px !important;
  width: 0 !important;
  padding: 0px 0px 0px 0px !important;
}
.table-in-table {
  border-top: 0px;
}
.first-table /deep/ .el-table__expanded-cell {
  background-color: #e0edff;
  &:hover {
    background-color: #e0edff !important;
  }
}
.head-body {
  background: transparent;
  margin-top: 5px;
  border-radius: 6px;
  width: 100%;
  height: 180px;
  padding: 5px 7px;
  overflow: hidden;
  .head-body-box {
    width: 100%;
    overflow: hidden;
    .head-body-left {
      width: 90%;
      overflow: hidden;
    }
    .head-body-right {
      width: 13%;
      margin-bottom: 5px;
      float: right;
    }
  }
}
.head-body-box > div {
  float: left;
}
.isMove {
  width: 65%;
  padding: 3px;
  background: rgba(2, 43, 126, 1);
  overflow: hidden;
  float: left;
  font-size: 12px;
}
.collapse-title {
  flex: 1 0 90%;
  order: 1;
}

/deep/ .el-table__body .is-center .cell {
  padding-left: 0;
  padding-right: 0;
}
/deep/ .el-collapse-item__header {
  background: rgba(0, 0, 0, 0);
}
/deep/ .el-collapse-item__wrap {
  background: rgba(0, 0, 0, 0);
}
/deep/ .el-collapse-item__content {
  padding-bottom: 0px;
}
.second-table /deep/ .el-table__expanded-cell {
  background-color: #e0edff;
  &:hover {
    background-color: #e0edff !important;
  }
}

.ranking-table /deep/ .gutter {
  background-color: rgb(238, 245, 255);
}

.first-table /deep/ .gutter {
  background-color: rgb(230, 241, 255);
}

.main ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.main ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0.1);
}
.main ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255, 0.2);
  border-radius: 10px;
  background: #ededed;
}
.content-body /deep/ .el-table tr {
  color: #bbdaff;
}

/deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent; //没有数据也变颜色
}
.content-body /deep/ .el-table tr {
  th {
    border: none;
  }
  td {
    border: none;
  }
}
.content-body /deep/.has-gutter {
  background: #022b7e !important;
  tr {
    background: #022b7e !important;
    th {
      background: #022b7e !important;
      color: #00e4ff !important;
      background: transparent;
    }
  }
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: transparent;
}
.content-body-box {
  & > div:nth-child(odd) .total-index-value {
    background: url("../../../../assets/img/industry/chemical.png");
    background-size: 100% 100%;
  }
  & > div:nth-child(even) .total-index-value {
    background: url("../../../../assets/img/industry/chemical2.png");
    background-size: 100% 100%;
  }
}
/deep/ .table-row1 {
  background-color: #082560 !important;
  color: #ffffff !important;
}
/deep/ .table-row2 {
  background-color: #051e79 !important;
  color: #ffffff !important;
}
/deep/.el-table__body-wrapper::-webkit-scrollbar {
  width: 0 !important;
}
/deep/ .el-table tbody tr:hover > td {
  background-color: #5f83ff !important;
}
.content-body /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
/deep/ .el-table__body {
  width: 100% !important;
}
.el-table__body-wrapper {
  background: transparent !important;
  tr {
    background: transparent !important;
    th {
      background: transparent !important;
    }
  }
}
.legend-body {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 30%;
  height: 70px;
  .legend-content {
    width: 100%;
    height: 16px;
    margin-bottom: 5px;
    .legend-point {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      float: left;
      margin-right: 5px;
      margin-top: 4px;
    }
    .legend-title {
      font-size: 12px;
      color: #4b5463;

      line-height: 16px;
    }
    .legend-value {
      font-size: 14px;
      padding: 5px 0px 0px 10px;
      font-weight: 600;
    }
  }
}
.active {
  color: transparent;
  background-image: -webkit-linear-gradient(#fff, #f0c41b, #fff, #f0c41b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.el-table__body-wrapper::-webkit-scrollbar {
  /*width: 0;宽度为0隐藏*/
  width: 0px;
}
.el-collapse {
  border: none;
}
.table3::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
/deep/ .el-icon-arrow-right {
  color: rgba(0, 228, 255, 1);
}
/deep/ .el-collapse-item__wrap {
  border: none;
}

#tableColor1 {
  width: 100%;
}
/deep/ .black {
  background-color: #041565 !important;

}
#tableColor /deep/ .el-table__body {
  width: 100% !important;
}
#tableColor1 /deep/ .el-table__body {
  width: 100% !important;
}
/deep/ .el-dialog__body {
  box-sizing: border-box;
  padding: 20px 20px;
  overflow: hidden;
}
/deep/.el-dialog__header{
text-align: center;
padding: 10px;
}
/deep/.el-dialog__title{
color: #52ccff;
}
</style>
